<template>
  <div>
    <div class="regirster-body">
      <div v-if="isInfo" class="regirster-body-div">
        <p>用户昵称：</p>
        <el-input placeholder="请输入内容" v-model="username" clearable></el-input>
        <p>密码</p>
        <el-input placeholder="请输入内容" v-model="password" clearable></el-input>
        <p>电子邮箱</p>
        <el-input placeholder="请输入内容" v-model="email" clearable></el-input>
        <p>电话号码</p>
        <el-input placeholder="请输入内容" v-model="phoneNumber" clearable></el-input>
        <p>第一车牌号码</p>
        <el-input placeholder="请输入内容" v-model="plateNumber" clearable></el-input>
         <el-radio-group v-model="radio1" style="margin-top: 20px;">
          <el-radio-button label="次卡用户"></el-radio-button>
          <el-radio-button label="月卡用户"></el-radio-button>
        </el-radio-group>
        <el-button type="primary" class="change" style="position: absolute;top: 410px;left: 500px;" @click="next">下一步>></el-button>
      </div>

      <div v-if="isCheck" class="regirster-body-check">
        <p>我们已经向邮箱 {{email}} 发送了一份电子邮件</p>
        <p>请确认您的身份：</p>
        <el-input placeholder="请输入内容" v-model="code" clearable></el-input>
        <el-button type="primary" class="change" style="position: absolute;top: 300px;left: 500px;" @click="next2">我已确认>></el-button>
      </div>

      <div v-if="isFinal" class="regirster-body-final">
        <el-result icon="success" title="完成注册" subTitle="请根据提示进行操作">
          <template slot="extra"></template>
        </el-result>
        <p><span>您的通行证号码为：</span><span style="color: red;">{{userAccount}}</span></p>
        <p>请点击左侧按钮返回登录界面</p>
      </div>

      <el-steps :active="step" style="width: 500px;height: 40px;position: absolute;top: 480px;left: 200px;">
        <el-step title="基本信息" ></el-step>
        <el-step title="邮箱验证" ></el-step>
        <el-step title="完成注册" ></el-step>
      </el-steps>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      username : 'zzzzz',
      password : '123456',
      email : '2655156865@qq.com',
      phoneNumber : '16696124022',
      plateNumber : '豫L2727',
      radio1 : '月卡用户',
      isInfo : true,
      isCheck : false,
      isFinal : false,
      step : 1,
      code : '1234',
      userAccount:'',
      userType : 'mouthly',
    }
  },

  methods:{
    async next(){
      this.isInfo = false
      this.isCheck = true
      this.step = 2

      const res = this.$http.post('user/userEmailSendAgain',{
        email:this.email
      })

      res.then(()=>{
        this.$message({
        message:'邮箱验证码已发送',
        type:'success'
      })
      })
    },

    async next2(){
      const res = await this.$http.post('user/userEmailCodeCheck',{
        code : this.code
      })

      if(res.data.status === 0){
        this.isInfo = false
        this.isCheck = false
        this.isFinal = true
        this.step = 3

        const res2 = await this.$http.post('user/register',{
          username : this.username,
          password : this.password,
          email : this.email,
          phoneNumber : this.phoneNumber,
          plateNumber1 : this.plateNumber,
          userType : this.userType
        })

        this.userAccount= res2.data.userAccount
      }else{
        this.$message.error({
          message:'邮箱验证未通过请检查验证码'
        })
      }
    }
  }
}
</script>

<style>
.regirster-body{
  padding: 30px; 
    min-width: 800px;
    min-height: 500px;   

    width: 800px;
    height: 500px;
    background-color: white;
    opacity: 1;
    border: 3px gray solid;

    border-radius:50px;
    box-shadow: 60px 60px 0px white;

    position: absolute;
    top: 10%;
    left: 25%;
}
.regirster-body-div{
  width: 300px;
  margin-left: 150px;
}
.regirster-body-div>p{
  margin-top: 20px;
}

.regirster-body-check{
  width: 500px;
  margin-left: 150px;
  font-size: 20px;
}
.regirster-body-check>p{
  margin-top: 50px;
}

.regirster-body-final>p{
  margin-left: 250px;
  font-size: 20px;
  padding-top: 35px;
}
</style>